<template>
  <a-form ref="formRef" label-align="right" :labelCol="{ span: 5 }" :model="formState">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item :label="'任务编号'" :name="'id'">
          <a-input allow-clear placeholder="请输入任务编号" v-model:value="formState.id" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'assignedStatus'" :label="'任务分配状态'">
          <a-select placeholder="请选择" v-model:value="formState.assignedStatus" allow-clear>
            <a-select-option v-for="item in assignedStatus" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'loadingStatus'" :label="'满载状态'">
          <a-select placeholder="请选择" v-model:value="formState.loadingStatus" allow-clear>
            <a-select-option v-for="item in loadingStatus" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="'车牌号码'" :name="'licensePlate'">
          <a-input
            allow-clear
            placeholder="请输入车牌号码"
            v-model:value="formState.truck.licensePlate"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'name'" :label="'起始地机构'">
          <a-tree-select
            :tree-data="treeData"
            placeholder="请选择起始地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            v-model:value="formState.startAgency.name"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'name'" :label="'目的地机构'">
          <a-tree-select
            :tree-data="treeData"
            placeholder="请选择目的地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            v-model:value="formState.endAgency.name"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="left" class="buttons">
      <a-space>
        <a-button type="primary" html-type="submit" @click="search">搜索</a-button>
        <a-button @click="onReset">重置</a-button>
      </a-space>
    </a-row>
  </a-form>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getBusinessHallTreeAPI } from '@/services/businessHall'
const formRef = ref()
defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})
const emit = defineEmits(['init', 'finish', 'reset', 'update:page', 'update:pageSize'])
// 分配状态
const assignedStatus = [
  { id: 2, name: '已分配' },
  { id: 3, name: '待人工分配' },
]
// 满载状态
const loadingStatus = [
  { id: 2, name: '满载' },
  { id: 3, name: '空载' },
]
// 点击搜索按钮
const search = async () => {
  console.log(formState)
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('finish', formState)
}
// 表单初始化
onMounted(() => {
  emit('init', formState)
})
// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  // 清空
  formState.startAgency.name = undefined
  formState.endAgency.name = undefined
  formState.truck.licensePlate = undefined
  emit('reset', formState)
}
// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()
  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}
getTreeData()
// 表单数据
const formState = reactive({
  orderId: undefined,
  assignedStatus: undefined,
  loadingStatus: undefined,
  /** 起始地机构 */
  startAgency: { name: undefined },
  /** 目的地机构 */
  endAgency: { name: undefined },
  /** 页码 */
  page: 1,
  /** 页面大小 */
  pageSize: 10,
  truck: { licensePlate: undefined },
})
</script>

<style scoped>
.buttons button {
  width: 80px;
  height: 38px;
}
</style>
